<!--
 @Description 新闻列表组件-右文左图样式
 @author gaohailan
 @date 2022/11/25
-->
<template>
  <section class="news-list-style-three">
    <section class="item-left">
      <div>
        <label-comp v-if="labelObj !== undefined" :label-list="item.labelList" />
        <van-image :src="setImgPath(getMapping(item, 'coverImgId'), getMapping(item, 'coverImgIdUrl'))" :fit="imgType">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
          <template v-slot:error>
            <img src="./images/error-icon.png" alt>
          </template>
        </van-image>
      </div>

    </section>
    <section class="item-right">
      <section class="right-title etc3">{{ getMapping(item, 'mainTitle') || "" }}</section>
      <section v-if="showSubTilte" class="title etc" >{{ getMapping(item, 'subTitle') || "" }}</section>
      <section class="right-txt">
        <span>{{ getMapping(item, 'publishTime') | newFormatTime }}</span>
          <!-- v-if="Likes" v-if="thumbsUp"  -->
        <div style="padding-right: 13px;">
          <span>{{ item.Likes | toDecimal }}</span>
          <img  src="./images/likes.png" alt style="width: 15px; height: 15px;">
        </div>  
        <img v-if="item.audioId" src="./images/news-audio.png" alt="">
      </section>
    </section>
  </section>
</template>
<script>
import mixins from '../../mixins'
import LabelComp from '@/components/CustomPage/apps/widget/labelComp'

export default {
  name: 'NewsListStyleThree',
  components: { LabelComp },
  filters: {
    toDecimal(num) {
      if (num > 10000) {
        var s = (num / 10000).toString()
        let numList = []
        let str = ''
        if (s.indexOf('.') != -1) {
          numList = s.split('.')
        } else {
          numList.push(s)
        }
        if (numList.length > 0) {
          if (numList.length == 1) {
            str = numList[0] + 'w'
          } else {
            for (let i = 0; i < numList.length; i++) {
              if (i == 0) {
                str = numList[0] + '.'
              }
              if (i == 1) {
                if (numList[i].length >= 2) {
                  const numLength = numList[i].length

                  str += numList[i].substring(0, 2)
                  if (
                    numLength > 2 &&
                      parseFloat(numList[i].substring(2, numLength)) >= 1
                  ) {
                    str += 'w+'
                  } else {
                    str += 'w'
                  }
                } else {
                  str += numList[i]
                  if (parseFloat(numList[i]) >= 1) {
                    str += 'w+'
                  } else {
                    str += 'w'
                  }
                }
              }
            }
          }
        }
        return str
      } else {
        return num
      }
    }
  },
  mixins: [mixins],
  // components: { EmptyPage },
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    labelObj: {
      type: Object,
      default: () => {
        return undefined
      }
    },
    option: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    // 是否展示副标题
    showSubTilte() {
      return this.option.showSubTilte
    },
    // 是否显示点赞量
    Likes(){
      return this.option.Likes
    },
    // 是否支持点赞
    thumbsUp(){
      return this.option.thumbsUp
    }
  }
}
</script>
<style lang="scss">
@import "@/styles/utility/rem.scss";

.news-list-style-three {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: rem(20);
  position: relative;

  .item-left {
    flex-shrink: 0;
    width: rem(228);
    height: rem(148);
    border-radius: rem(8);
    margin-right: rem(20);

    > div {
      position: relative;
      width: rem(228);
      height: rem(148);
      .van-image {
        display: block;
        width: rem(228);
        height: rem(148);
        border-radius: rem(8);
        background: #c9c9c9;
        overflow: hidden;

        .van-image__error {
          > img {
            width: rem(120);
            height: rem(120);
          }
        }
      }
    }

  }

  .item-right {
    flex: 1;

    .right-title {
      font-size: rem(30);
      font-weight: bold;
      text-align: left;
      color: #333333;
      line-height: 1.5;
    }
    .title {
      font-size: rem(24);
      color: #999;
      margin-top: rem(18);
    }
    .right-txt {
      margin-top: rem(30);
      font-size: rem(22);
      font-weight: 400;
      text-align: left;
      color: #999999;
      display: flex;
      align-items: center;
      justify-content: space-between;

      > span {
        display: inline-block;
        margin-right: rem(20);
      }
    }
  }
}
</style>
